<template>
  <div>
    <el-alert center>欢迎你回来！
      </el-alert> 
    <div class="wrap">
    <div class="cube">
        <div class="before"></div>
        <div class="after"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>
  </div>
  
</template>

<script>
  export default {    data() {
      return {
      value: new Date()
      };
    },
    methods: {
    }

  };
</script>

<style>


    /*最外层容器样式*/
    .wrap{
      width: 200px;
      height: 200px;
      /*改变左右上下,图片方块移动*/
      margin: 150px auto;
      position: relative;
      
    }
    /*包裹所有容器样式*/
    .cube{
      width: 200px;
      height: 200px;
      margin: 0 auto;
      transform-style: preserve-3d;
      transform: rotateX(-30deg) rotateY(-80deg);
      -webkit-animation: rotate 20s infinite;
      animation-timing-function: linear;
    }
    @-webkit-keyframes rotate{
      from{
        transform: rotateX(0deg) rotateY(0deg);
      }
      to{
        transform: rotateX(360deg) rotateY(360deg);
      }
    }
    .cube div{
      position: absolute;
      width: 200px;
      height: 200px;
      opacity: 0.8;
      /* transition: all .4s; */
    }
    /*定义所有图片样式*/
    .pic{
      width: 200px;
      height: 200px;
    }
    .cube .before{
      transform: rotateY(0deg) translateZ(100px);
      background: #FFA726;
    }
    .cube .after{
      transform: translateZ(-100px) rotateY(180deg);
      background: #F57F17;
    }
    .cube .left{
      transform: rotateY(90deg) translateZ(100px);
      background: #1DE9B6;
    }
    .cube .right{
      transform: rotateY(-90deg) translateZ(100px);
      background: #448AFF;
    }
    .cube .top{
      transform: rotateX(90deg) translateZ(100px);
      background: #7C4DFF;
    }
    .cube .bottom{
      transform: rotateX(-90deg) translateZ(100px);
      background: #FF4081;
    }
</style>

